<template>
	<view class="main-cont">
		<u-navbar :is-back="false" :is-fixed="true" title=" " :background="background" :border-bottom="false">
			<view class="slot-wrap box box-align-center" v-if="isToken == false">
				<u-image src="https://www.wytldy.com/file/20230624/1687610421539logo.jpg" width="53rpx" height="53rpx"
					shape="circle"></u-image>
				<!-- <image src="../../static/indexLogo.png" mode="" style="width: 53rpx;height: 53rpx; border-radius: 50%;"></image> -->
				<view class="ml10 tl colorfff">
					五育通劳动教育云
				</view>
			</view>
			<view class="bar" v-if="role=='team'">
				<view class="logo" @click="changeSchool()">
					<u-image src="@/static/home/icon_change.png" class="changeimg" width="40rpx" height="36rpx">
						<u-loading slot="loading"></u-loading>
					</u-image>
					<!-- <u-image :src="currSchool.logo" width="80rpx" height="80rpx" mode="heightFix"></u-image> -->
				</view>

				<view class="ml10 colorfff">
					{{currSchool.name}}
				</view>
			</view>
			<view class="bar" @click="changeClass()" v-if="role == `tr`">
				<u-image src="/static/home/change_btn.png" width="46rpx" height="46rpx" :lazy-load="true">
					<u-loading slot="loading"></u-loading>
				</u-image>
				<view class="ml50 colorfff">
					{{bjmc!=null?bjmc:'暂无班级'}}
				</view>
			</view>
			<view class="bar" v-if="role== `stu`">
				<view class="ml50 colorfff">
					{{bjmc!=null?bjmc:'暂无班级'}}
				</view>
			</view>
		</u-navbar>
		<view class="" style="height: 379rpx;background-color: #7484f7;">
		</view>
		<view class="main-top">
			<view class="top-1">
				<view class="info-cont box box-align-center box-pack-between mt5" @click="goPerson(user)">
					<view class="info" v-if="isToken">
						<u-avatar :src="user.icon" mode="circle" size="104"></u-avatar>
						<view class="info-bottom">
							<view class="name">
								<view class="t-name">
									{{user.name}}
								</view>
								<view class="tips ml5 padding20" v-if="user.type !=0">
									{{roleName}}
								</view>
							</view>
							<view class="school-name" v-if="role != 'admin'">
								{{(user.mobile==undefined || user.mobile==null)?'':user.mobile}}
							</view>
							<view class="school-name" v-else>
								{{currSchool.name}}
							</view>
						</view>
					</view>
					<view class="info" v-else>
						<u-avatar :src="user.icon" mode="circle" size="104"></u-avatar>
						<view class="info-bottom">
							<view class="name">
								请登录
							</view>
						</view>
					</view>
					<u-icon name="arrow-right" color="#AEB8CF"></u-icon>
				</view>
			</view>
		</view>
		<view class="main-bottom">
			<view class="" v-if="isToken">
				<view class="list" @click="changerole" v-if="roles.length>1">
					<view class="list-left">
						<u-image src="/static/my/change_user.png" width="40rpx" height="37rpx"></u-image>
						<view class="icon-1">
							切换身份
						</view>
					</view>
					<u-icon name="arrow-right" color="#AEB8CF"></u-icon>
				</view>
				<view class="list" @click="goClass()" v-if="role !=`team`&&role !=`admin` && isTourist!=true">
					<view class="list-left">
						<u-image src="/static/my/class.png" width="36rpx" height="37rpx"></u-image>
						<view class="icon-1">
							我的班级
						</view>
					</view>
					<u-icon name="arrow-right" color="#AEB8CF"></u-icon>
				</view>
				<view class="list" @click="goAllRecord" v-if="role == `team`">
					<view class="list-left">
						<u-image src="/static/my/record.png" width="36rpx" height="37rpx"></u-image>
						<view class="icon-1">
							总体报告
						</view>
					</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<view class="list" @click="goStuXqRecord" v-if="role== `stu`">
					<view class="list-left">
						<u-image src="/static/my/record.png" width="36rpx" height="37rpx"></u-image>
						<view class="icon-1">
							统计报告
						</view>
					</view>
					<u-icon name="arrow-right" color="#AEB8CF"></u-icon>
				</view>
				<view class="list" @click="goXqRecord" v-if="role == `team` || role == `admin`">
					<view class="list-left">
						<u-image src="/static/my/record.png" width="36rpx" height="37rpx"></u-image>
						<view class="icon-1">
							评估报告
						</view>
					</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<view class="list" @click="goXqRecord" v-if="role == `stu`">
					<view class="list-left">
						<u-image src="/static/my/record.png" width="36rpx" height="37rpx"></u-image>
						<view class="icon-1">
							学情报告
						</view>
					</view>
					<u-icon name="arrow-right" color="#AEB8CF"></u-icon>
				</view>
				<view class="list" @click="goZs" v-if="role == `stu`">
					<view class="list-left">
						<u-image src="/static/my/cert.png" width="36rpx" height="37rpx"></u-image>
						<view class="icon-1">
							证书
						</view>
					</view>
					<u-icon name="arrow-right" color="#AEB8CF"></u-icon>
				</view>
			</view>

			<u-button class="list btn-open" open-type="contact" :custom-style="contact">
				<view class="list-left">
					<u-image src="/static/my/contact.png" class="btn" width="36rpx" height="37rpx"
						style="margin-top: -30rpx;"></u-image>
					<view class="icon-1">
						联系客服
					</view>
				</view>
				<u-icon name="arrow-right" color="#AEB8CF"></u-icon>
			</u-button>
			<view class="list" @click="open">
				<view class="list-left">
					<u-image src="/static/my/set.png" width="36rpx" height="37rpx"></u-image>
					<view class="icon-1">
						设置
					</view>
				</view>
				<u-icon name="arrow-right" color="#AEB8CF"></u-icon>
			</view>
			<!-- <view class="list" @click="update()">
				<view class="list-left">
					<u-icon name="reload" color="#7484f7" size="36"></u-icon>
					<view class="icon-1">
						检查更新
					</view>
				</view>
			</view> -->
		</view>
		<u-top-tips ref="uTips" :z-index="10000"></u-top-tips>
		<view-tabbar></view-tabbar>
	</view>
</template>

<script>
	import mixinDevice from "@/common/mixins.js"
	export default {
		mixins: [mixinDevice],
		data() {
			return {
				background: {
					backgroundColor: 'transparent',
					transitionDuration: ".25s, .5s"
				},
				destroyShow: false,
				customStyle: {
					color: '#4c87ff'
				},
				isdot: false,
				userRole: '',
				user: uni.getStorageSync('user'),
				contact: {
					width: '722rpx',
					display: 'flex',
					alignItems: 'center',
					justifyContent: 'space-between',
					padding: '0'
				},
				setShow: false,
				roles: uni.getStorageSync("roles"),
				currSchool: uni.getStorageSync('currSchool'),
				bjmc: uni.getStorageSync('clazz').bjmc ? uni.getStorageSync('clazz').bjmc : null,
				role: uni.getStorageSync("role")
			}
		},
		computed: {
			roleName() {
				let role = uni.getStorageSync("role")
				return role == `team` ? `服务团队` : role == `tr` ? `老师` : role == "admin" ? `学校管理员` : role == `stu` ? `学生` :
					''
			},
			isToken() {
				return uni.getStorageSync('token') != ""
			}
		},
		onPageScroll(e) {
			// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
			console.log(e.scrollTop);
			if (e.scrollTop >= 92) {
				this.background.backgroundColor = "#e5eafe"
			} else {
				this.background.backgroundColor = "transparent"
			}
		},
		onLoad() {
			if (this.isToken && this.role == `stu`) {
				this.getStuClass()
			} else if (this.isToken && this.role == `tr`) {
				// this.getTrClass()
			}
		},
		methods: {
			//切换学校 服务团队
			changeSchool() {
				uni.navigateTo({
					url: "/team/kc/changeSchool"
				})
			},
			//查询班级 老师
			getTrClass() {
				let opts = {
					url: '/dclass/trClassList',
					method: 'post'
				};
				let params = {
					trid: this.user.id
				};
				this.$api.post(opts, params).then(res => {
					if (res.list.length > 0) {
						this.bjmc = res.list[0].bjmc;
						uni.setStorageSync('dclass', res.list[0]);
					}
				})
			},
			//查询班级 学生
			getStuClass() {
				let opts = {
					url: '/dclass/getStuClass',
					method: 'post'
				};
				let params = {
					userid: this.user.id
				};
				this.$api.post(opts, params).then(res => {
					this.bjmc = res.data.bjmc;
					uni.setStorageSync('dclass', res.data);
				})
			},
			//切换班级 老师
			changeClass() {
				uni.navigateTo({
					url: "/pageHome/changeClass"
				})
			},
			//服务团队切换角色
			changerole() {
				uni.navigateTo({
					url: '/pages/index/selectRole'
				})
			},
			//评估报告
			goXqRecord() {
				uni.navigateTo({
					url: this.role != 'stu' ? '/team/pgRecord' : '/stuPageMy/myRecord'
				})
			},
			//总体报告
			goAllRecord() {
				uni.navigateTo({
					url: '/team/allRecord'
				})
			},
			goStuXqRecord() {
				uni.navigateTo({
					url: '/stuPageMy/xqRecord'
				})
			},
			goXq() {
				uni.navigateTo({
					url: '/stuPageMy/record'
				})
			},
			goZs() {
				uni.navigateTo({
					url: '/stuPageMy/zs'
				})
			},
			goClass() {
				uni.navigateTo({
					url: this.role == `tr` ? '/trPageMy/classList' : '/stuPageMy/classList'
				})
			},
			foucs() {
				uni.navigateTo({
					url: '/trPageMy/sjInfo'
				})
			},
			goPerson(user) {
				console.log(user, "个人信息");
				uni.navigateTo({
					url: this.isToken ? '/Public/PersonInfo/PersonInfo' : '/pages/Login/Login'
				})
			},
			changePassword() {
				uni.navigateTo({
					url: '/pageHome/changePassword/changePassword'
				})
				this.setShow = false
			},
			open() {
				if (this.isToken) {
					uni.navigateTo({
						url: '/trPageMy/set'
					})
				} else {
					uni.navigateTo({
						url: "/pages/Login/Login"
					})
				}

				// //console.log('打开');
				// this.setShow = true
			},
			goBind() {
				uni.navigateTo({
					url: '/trPageMy/bind'
				})
			},
			update() {
				if (wx.canIUse('getUpdateManager')) {
					const updateManager = wx.getUpdateManager()
					updateManager.onCheckForUpdate(function(res) {
						// 请求完新版本信息的回调
						if (res.hasUpdate) {
							updateManager.onUpdateReady(function() {
								wx.showModal({
									title: '更新提示',
									content: '新版本已经准备好，是否重启应用？',
									success: function(res) {
										if (res.confirm) {
											// 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
											updateManager.applyUpdate()
										}
									}
								})
							})
							updateManager.onUpdateFailed(function() {
								// 新的版本下载失败
								wx.showModal({
									title: '已经有新版本了哟~',
									content: '新版本已经上线啦~，请您删除当前小程序，重新搜索打开哟~',
								})
							})
						} else {
							uni.showToast({
								title: '已经是最新版本',
								icon: 'none'
							})
						}
					})
				} else {
					// 如果希望用户在最新版本的客户端上体验您的小程序，可以这样子提示
					// wx.showModal({
					// 	title: '提示',
					// 	content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。',
					// 	success: () => {
					// 		 wx.exitMiniProgram({})
					// 	}
					// })
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.padding20 {
		padding: 0 20rpx;
	}

	.main-cont {
		position: relative;
		margin-top: -188rpx;
		width: 100%;

		.main-top {
			margin-top: -240rpx;
			position: relative;
			width: 100%;
			height: 200rpx;

			.wrap {

				margin-top: 173rpx;
				width: 90%;
				position: absolute;
				left: 50%;
				top: 0;
				padding: 0;
				transform: translate(-50%, 0);
			}

			.top-1 {
				padding: 40rpx 57rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: #fff;

				.info-cont {
					width: 100%;
				}

				.info {
					display: flex;
					align-items: center;
					justify-content: center;

					.info-bottom {
						padding-left: 21rpx;
						display: flex;
						flex-direction: column;
						align-items: flex-start;
						justify-content: flex-start;

						.name {
							display: flex;
							align-items: center;
							font-size: 40rpx;

							.t-name {
								max-width: 346rpx;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}
						}

						.tips {
							padding: 0 20rpx;
							width: auto;
							min-width: 77rpx;
							height: 36rpx;
							line-height: 32rpx;
							background: #8F92FC;
							border: 1px solid #F3F4FB;
							border-radius: 18px;
							color: #fff;
							font-size: 22rpx;
							text-align: center;
						}

						.score {
							margin-top: 16rpx;
							display: flex;
							align-items: center;
							justify-content: center;

							.score-1 {
								margin: 0 10rpx;
							}
						}

						.school-name {
							margin-top: 8rpx;
							font-size: 28rpx;
							// display: flex;
							// align-items: center;
							// justify-content: center;
							// padding: 10rpx;
							// border-radius: 30rpx;
							// background-color: #7caefb;
						}
					}
				}

				.btn1 {}
			}

			.top-2 {
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				// height: 216rpx;
				height: 150rpx;

				.left,
				.right {
					position: relative;
					width: 40%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					.mt20 {
						margin-top: 20rpx;
					}

					.img {
						position: absolute;
						right: -107rpx;
						top: -72rpx;
					}

				}

			}
		}

		.foucs {
			margin-top: -36rpx;
			position: relative;
			width: 100%;
			height: 139rpx;

			.foucs-main {
				width: 100%;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}

			.foucs-cont {
				font-size: 28rpx;
				color: #FFF7E7;
			}

			.on-foucs {
				width: 142rpx;
				height: 53rpx;
				line-height: 53rpx;
				background: linear-gradient(180deg, #FFFFFF, #FBD2C3);
				box-shadow: 0px 1rpx 35rpx 0px rgba(255, 144, 113, 0.49);
				border-radius: 21px;
				color: #F95C2E;
				font-size: 24rpx;
				text-align: center;
			}
		}

		.main-bottom {
			.list {
				// width: 722rpx;
				margin: 16rpx 14rpx;
				padding: 0 36rpx;
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				background-color: #fff;
				border-radius: 8rpx;

				.list-left {
					display: flex;
					align-items: center;

					.icon-1 {
						margin-left: 20rpx;
					}
				}
			}
		}
	}

	.btn-open {
		font-size: 29rpx;
		// width: 100%;
		background: transparent;
		border: none !important;
		padding: 0;

		.u-hairline-border::after {
			border: none !important;
		}
	}

	.days {
		font-size: 24rpx;
		margin-top: 50rpx;
	}

	.mt10 {
		margin-top: 16rpx !important;
	}

	.set-item {
		padding: 120rpx 40rpx;

		.list {
			width: 528rpx;
			height: 72rpx;
			background: #F8F9FC;
			border-radius: 12rpx;
		}
	}

	.bar {
		display: flex;
		align-items: center;
		padding-left: 50rpx;
	}

	.slot-wrap {
		padding-left: 40rpx;
	}
</style>